<productGrid id="productGrid" th:fragment="productGrid">
    <div>
        <table id="productGrid"></table>
        <div id="productGridPager"></div>
    </div>
</productGrid>

<productForm id="productForm" th:fragment="productForm">
    <div data-loader="showProductDetail" id="productForm" class="modal fade bs-large-modal-lg pos-model" keyboard="false" tabindex="-1" role="dialog"  aria-hidden="false">
        <form class="sky-form boxed" method="post" action="save"  data-updater="#productGrid">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="model-title">New Item</h4>
                </div><!-- /modal header -->
                    <div class="modal-body">
                        <input type="hidden" name="productId" id="productId" />
                    <div class="form-group has-feedback" id="name-div">
                        <label for="name">Name</label>
                        <input type="text" placeholder="Name of Item" id="name" class="form-control uppercase"  aria-describedby="nameStatus" name="name" required="true" data-error="The product name is invalid" />
                        <div class="help-block with-errors "></div>
                        <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
                        <span id="nameStatus" class="sr-only">(success)</span>
                    </div>

                        <div class="tabs nomargin-top">
                            <!-- tabs -->
                            <ul class="nav nav-tabs nav-justified">
                                <li class="active">
                                    <a data-toggle="tab" href="#tab_1">
                                        Basic info
                                    </a>
                                </li>
                                <li class="">
                                    <a data-toggle="tab" href="#tab_2">
                                        Pricing
                                    </a>
                                </li>

                            </ul>

                            <!-- tabs content -->
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab_1">
                                    <div class="form-group">
                                        <label for="manufacturer">Manufacturer</label>
                                        <input type="text" placeholder="Enter manufacturer" id="manufacturer" class="form-control uppercase"  name="manufacturer"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="sku">SKU</label>
                                        <input type="text" placeholder="Enter SKU" id="sku" class="form-control uppercase" name="sku" required="true" />
                                    </div>

                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea placeholder="Product Description" rows="5" id="description" name="description" class="form-control" ></textarea>
                                    </div>
                                </div>

                                <div class="tab-pane" id="tab_2">
                                    <div class="row">
                                        <section class="col col-md-6">
                                             <div class="form-group  has-feedback">
                                                <label class="control-label" for="regPrice">Reg Price</label>
                                                <div class="input-group">
                                                    <span class="input-group-addon">INR</span>
                                                    <input name="regPrice" type="text" class="form-control" id="regPrice" aria-describedby="regPriceStatus" data-mask="#" />
                                                </div>
                                                <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
                                                <span id="regPriceStatus" class="sr-only">(success)</span>
                                            </div>
                                        </section>
                                        <section class="col col-md-6">
                                            <div class="form-group  has-feedback">
                                                <label class="control-label" for="salePrice">Sale Price</label>
                                                <div class="input-group">
                                                    <span class="input-group-addon">INR</span>
                                                    <input name="salePrice" type="text" class="form-control" id="salePrice" aria-describedby="salePriceStatus" data-mask="#"/>
                                                </div>
                                                <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
                                                <span id="salePriceStatus" class="sr-only">(success)</span>
                                            </div>
                                        </section>

                                    </div>
                                    <div class="row">
                                        <section class="col col-md-6">
                                            <div class="form-group  has-feedback">
                                                <label class="control-label" for="regPrice">Cost Price</label>
                                                <div class="input-group">
                                                    <span class="input-group-addon">INR</span>
                                                    <input name="costPrice" type="text" class="form-control" id="costPrice" aria-describedby="costPriceStatus" data-mask="#"/>
                                                </div>
                                                <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
                                                <span id="costPriceStatus" class="sr-only">(success)</span>
                                            </div>
                                        </section>
                                        <section class="col col-md-6">
                                            <div class="form-group  has-feedback">
                                                <label class="control-label" for="bulkOrderPrice">Bulk Price</label>
                                                <div class="input-group">
                                                    <span class="input-group-addon">INR</span>
                                                    <input name="bulkOrderPrice" type="text" class="form-control" id="bulkOrderPrice" aria-describedby="bulkOrderPriceStatus" data-mask="#"/>
                                                </div>
                                                <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
                                                <span id="bulkOrderPriceStatus" class="sr-only">(success)</span>
                                           </div>
                                      </section>
                                    </div>

                                    <div class="row">

                                        <section class="col col-md-6">
                                            <div class="form-group  has-feedback">
                                                <label class="control-label" for="onHandQty">OnHand Qty</label>
                                                <div class="input-group">
                                                    <span class="input-group-addon">@</span>
                                                    <input name="onHandQty" type="text" class="form-control" id="onHandQty" aria-describedby="onHandQtyStatus" data-mask="#.00"/>
                                                </div>
                                                <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
                                                <span id="onHandQtyStatus" class="sr-only">(success)</span>
                                            </div>
                                        </section>
                                        <section class="col col-md-6">
                                            <div class="form-group  has-feedback">
                                                <label class="control-label" for="reorderQty">ReOrder Qty</label>
                                                <div class="input-group">
                                                    <span class="input-group-addon">@</span>
                                                    <input name="reorderQty" type="text" class="form-control" id="reorderQty" aria-describedby="reorderQtyStatus" data-mask="#.00"/>
                                                </div>
                                                <span class="glyphicon  form-control-feedback" aria-hidden="true"></span>
                                                <span id="reorderQtyStatus" class="sr-only">(success)</span>
                                            </div>
                                        </section>
                                    </div>

                                    <div class="form-group">
                                        <label>Base Unit: <span>*</span></label>
                                        <br/>
                                        <select  id="baseUnit" name="baseUnit">
                                            <option th:each="color : ${T(com.chandra.pos.common.model.BaseUnit).values()}" th:value="${color}" th:text="${color.value}" ></option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                        </div>
                </div>
                    <div class="modal-footer"><!-- modal footer -->
                    <div class="alert alert-danger alert-dismissible" role="alert" id="model-error-block"  style="display:none;">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <strong>Error!</strong> A problem has been occurred while submitting your data.
                    </div>
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" id="create-product" class="btn btn-primary" value="Save changes" data-reset="false" data-callback=""/>
                </div>
            </div>
        </div>
        </form>
    </div>
</productForm>

<searchForm id="searchForm" th:fragment="searchForm">
    <div class="toggle active pos-search-panel">
        <label>Search</label>
        <div class="toggle-content">
            <form data-example-id="input-group-with-button" class="pos-search-form" data-updater="#productGrid">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group'>
                                <input type='text' class="form-control datepicker" placeholder="Enter item name" id="searchQuery" />
                    <span class="input-group-addon">
                        <span class="glyphicon "></span>
                    </span>
                            </div>
                        </div>
                    </div>

                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group ' >
                                <input type='text' class="form-control datepicker" placeholder="Enter manufacturer name" id="search-manufacturer" />
                    <span class="input-group-addon">
                        <span class="glyphicon "></span>
                    </span>
                            </div>
                        </div>
                    </div>

                </div>

                <footer>
                    <button id="search-item" class="btn btn-default " type="button"><span aria-hidden="true" class="glyphicon glyphicon-search"></span>Search</button>
                    <button type="button" class="btn btn-default " data-toggle="modal" data-target="#productForm"><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>New Item</button>
                </footer>
            </form>
        </div>
    </div>
</searchForm>
